<template>
  <div id="app">
    <out-line :height="height">
      <div id="map-container" :style="{ height: cHMap + 'px'}"></div>
    </out-line>
  </div>
</template>

<script>
import blocate1 from '@/assets/images/blocate1.png'
import blocate2 from '@/assets/images/blocate2.png'
import blocate3 from '@/assets/images/blocate3.png'
export default {
  props: {
    height: {
      type: Number,
      default: 200
    },
    cHMap: {
      type: Number,
      default: 200
    },
  },
  data() {
    // @click="getAddress"
    return {
      institutions: [
        {
          name: '某养老院',
          type: '养老院',
          address: '上党区某某街道某某路123号城回族区经开区经北上党区某某街道某某路123号城回族区经开区经北二路116号办公楼5二路116号办公楼5',
          phone: '0371-9556211',
          total: 100,
          staff: 20,
          beds: 80,
          polygon: [
            [116.397477, 39.908692],
            [116.410049, 39.908692],
            [116.410049, 39.902881],
            [116.397477, 39.902881]
          ]
        },
        {
          name: '某日间照料中心',
          type: '日间照料中心',
          address: '管城回族区经开区经北二路116号办公楼5城回族区经开区经北二路116号办公楼5楼',
          phone: '0371-9556222',
          total: 50,
          staff: 10,
          beds: 0,
          polygon: [
            [116.397477, 39.918692],
            [116.410049, 39.918692],
            [116.410049, 39.912881],
            [116.397477, 39.912881]
          ]
        },
        {
          name: '某社区服务中心',
          type: '社区服务中心',
          address: '金水区某某街道某某路456号',
          phone: '0371-9556333',
          total: 0,
          staff: 5,
          beds: 0,
          polygon: [
            [116.387477, 39.928692],
            [116.410049, 39.928692],
            [116.410049, 39.922881],
            [116.397477, 39.922881]
          ]
        }
      ],
      map: null,
      polygons: [],
      infoWindow: null,
      activeIndex: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new AMap.Map('map-container', {
        zoom: 13,
        center: [116.397477, 39.908692],
        mapStyle: "amap://styles/db027b434158ae048a7cb0a5b2e1872c",
      });

      // 启用鼠标滚轮缩放功能
      this.map.plugin(['AMap.MouseTool'], () => {
        this.map.addControl(new AMap.MouseTool())
      })

      this.infoWindow = new AMap.InfoWindow({
        // showCloseButton: false, // 是否显示关闭按钮
        // background: 'transparent', // 设置背景为透明
        offset: new AMap.Pixel(14, -50)
      });

      for (let i = 0; i < this.institutions.length; i++) {
        const institution = this.institutions[i];
        const polygon = new AMap.Polygon({
          map: this.map,
          path: institution.polygon,
          strokeColor: '#00c6ff',
          strokeWeight: 2,
          fillColor: '#1791fc',
          fillOpacity: 0.2,
          visible: false
        });

        this.polygons.push(polygon);
        const marker = new AMap.Marker({
          map: this.map,
          position: institution.polygon[0],
          icon: this.getMarkerIcon(institution.type),
          clickable: true
        });

        marker.on('click', () => {
          this.handleMarkerClick(i);
        });
      }
    },
    getMarkerIcon(type) {
      let icon = '';
      switch (type) {
        case '养老院':
          icon = blocate1;
          break;
        case '日间照料中心':
          icon = blocate2;
          break;
        case '社区服务中心':
          icon = blocate3;
          break;
        default:
          icon = blocate1;
          break;
      }

      return icon;
    },
    handleMarkerClick(index) {
      this.showPolygon(index);
      this.showInfoWindow(index);
    },
    showPolygon(index) {
      for (let i = 0; i < this.polygons.length; i++) {
        if (i === index) {
          this.polygons[i].show();
        } else {
          this.polygons[i].hide();
        }
      }
    },
    showInfoWindow(index) {
      const institution = this.institutions[index];
      const testTitle = institution.address
      const content = `
      <div class ="info-window">
        <h3 class="info-title">${institution.name}</h3>
        <p class="info-text" title='${institution.phone}'>联系电话：${institution.phone}联系电话联系电话联系电话联系电话</p>
        <p class="info-address" title='${institution.address}'>${institution.address}</p>
        <ul class="info-list">
          <li class="info-list-item">
             <div class="text">老人总数</div>
            <div class="num">${institution.total}</div>
          </li>
          <li class="info-list-item">
             <div class="text">服务人员</div>
            <div class="num">${institution.staff}</div>
          </li>
          <li class="info-list-item">
             <div class="text">剩余床位</div>
            <div class="num">${institution.beds}</div>
          </li>
        </ul>
      </div>
      `;
      this.infoWindow.setContent(content);
      this.infoWindow.open(this.map, institution.polygon[0]);
    }
  }
};
</script>

<style lang="less">
#map-container {
  width: 100%;
  height: 500px;
}
.amap-info-contentContainer {
}
.amap-info-content {
  background: none;
  overflow: hidden;
  box-sizing: border-box;
}
.info-window {
  width: 338px;
  height: 180px;
  background: url("../../../assets/images/InfoWindow.png") center center
    no-repeat;
  /* background-color: rgba(32, 44, 255, 0.2); */
  /* background-repeat: no-repeat; */
  background-size: cover;
  /* overflow: hidden; */
  // color: #26befe;
  color: #a5e4ff;
  padding: 20px 20px 20px 25px;
  font-size: 14px;
  .info-title {
    font-size: 17px;
    font-weight: bold;
    // color: #26befe;
    color: #a5e4ff;
    margin-bottom: 4px;
  }
  .info-text {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 20px;
  }
  .info-address {
    height: 40px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
  }
}
.bottom-center {
  .amap-info-sharp {
    left: 0px !important;
    background: url("../../../assets/images/infosharp.png") right -3px no-repeat;
    width: 260px;
    height: 131px;
    left: -60px !important;
    border-top: 0px;
    bottom: -58px;
    &::after {
      display: none;
    }
  }
}
.info-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 2px;
  font-size: 14px;
}

.info-list-item {
  margin-right: 16px;
  text-align: center;
  position: relative;
  font-size: 14px;
}
.info-list-item::after {
  content: "";
  width: 1px;
  height: 26px;
  background-color: #006afb;
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
}

.info-list-item:last-child::after {
  display: none;
}
.text {
  // color: #26befe;
  color: #a5e4ff;
}

.num {
  font-size: 24px;
  // font-family: DS-Digital;
  font-weight: normal;
  color: #0ef9b3;
  font-family: 'electronicFont';
}
.amap-logo {
  display: none !important;
}
/* infosharp.png */
</style>


